<template>
    <div class="test">  
        <div id="container">
            <div id="target" ref="target" style="position: relative; left: 0px;">
                <span>1123</span>
                <span>Lorem ispansum dolor sit amet, consectetur adipiscing elit.</span>
                <span>22343</span>
            </div>
        </div>
        <button @click="scroll">Scroll</button>
        <!-- <div id="container" ref="container">
            <div id="target" style="position: relative; left: 0px;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <button @click="scrollToChild">Scroll to Child</button>
            <div id="child" style="position: relative; left: 200px;">
                <p>Child Element</p>
            </div>
        </div> -->
  </div>
    </div>
</template>
<script>
export default {
   data() {
      return {

      }
   },
   created(){
   },
   computed:{
   },
   methods: {
    scrollToChild() {
      const child = this.$refs.container.querySelector('#child'); // 获取子元素
      const target = this.$refs.container.querySelector('#target'); // 获取父元素
      const childOffset = child.getBoundingClientRect().left - target.getBoundingClientRect().left; // 计算子元素相对于父元素的偏移量
      target.scrollLeft = childOffset; // 设置父元素的滚动条位置
      child.scrollIntoView({ block: 'start', inline: 'nearest' }); // 滚动到视口
      child.style.left = `${child.offsetLeft - 40}px`; // 移动元素，使其向左滚动40px
    },
    scroll() {
         const target = this.$refs.target; // 获取目标元素
         target.scrollIntoView({ block: 'start', inline: 'nearest' }); // 滚动到视口
         target.style.left = `${target.offsetLeft - 40}px`; // 移动元素，使其向左滚动40px
      }
   }
}
</script>
<style scoped lang="scss"> 
    .test{
        width: 100%;
        height: 100%;
        #container{
            width: 400px;
            margin: 0 auto;
            overflow: auto;
        }
        #target {
            transition: left 1s ease-out; /* 定义滚动动画效果 */
        }
        
    }
</style>
